<template>
  <div>
    <div class="qrcode">
      <img src="../images/QRcode.png" alt="">
    </div>
    <div class="top">
        <!-- <div class="fl">
					<a >设为首页</a>
					<a >加入收藏</a>
					<a >网站地图</a>
				</div> -->
        <div class="search fr">
          <input type="text" v-model="form.input" placeholder="请输入您要查找的内容" class="txt" @keyup.enter="submit">
          <input type="button" class="btn" @click="submit">
        </div>
      </div>
    <div class="header" @click.prevent="gotoindex()">
      
      <h1 class="logo" >
        <!-- <a><img src="../images/logo.png" height="88" alt="上海佛教网"></a> -->
      </h1>
    </div>
    
    <div class="nav">
      <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">本会介绍</el-menu-item>
        <el-menu-item index="3">新闻中心</el-menu-item>
        <el-menu-item index="4">政策法规</el-menu-item>
        <el-menu-item index="5">慈善公益</el-menu-item>
        <el-menu-item index="6">寺院场所</el-menu-item>
      </el-menu>
    </div>
    <section class="content-container">
      <div class="grid-content bg-purple-light">
        <transition>
          <router-view></router-view>
        </transition>
      </div>
    </section>
    <div class="footer">
      <div class="links">
        <h3>友情链接</h3>
        <a href="http://www.sara.gov.cn/" target="_blank">国家宗教事务局</a> |
        <a href="http://www.shmzw.gov.cn/mzw/index.html" target="_blank">上海市名族宗教事务委员会</a> |
        <a href="http://www.chinabuddhism.com.cn/" target="_blank">中国佛教协会</a> |
        <a href="http://www.yufotemple.com/" target="_blank">上海玉佛禅寺</a> |
        <a href="http://www.shjas.org/cn/index.aspx" target="_blank">上海静安寺</a> |
        <a href="http://www.niseng.org/" target="_blank">尼众在线</a> |
        <a href="http://www.qibaosi.com/" target="_blank">上海七宝教寺 上海寿安寺
        </a> <br>
        <a href="http://www.baoguosi.org/" target="_blank">上海报国寺</a> |
        <a href="http://www.hfs.sh.cn/" target="_blank">上海洪福寺</a> |
        <a href="http://www.donglinsi.org/" target="_blank">上海东林寺</a> |
        <a href="http://www.eryansi.com/" target="_blank">上海二严寺</a> |
        <a href="http://www.songyinchansi.com/" target="_blank">上海松隐禅寺</a> |
        <a href="http://www.nanshangusi.com/" target="_blank">上海南山古寺</a> |
        <a href="http://www.wanshousi.cn/" target="_blank">上海万寿寺</a> |
        <a href="http://www.shtgs.org/" target="_blank">上海天光禅寺</a> |
        <a href="http://www.shengdiantemple.com/" target="_blank">上海省殿禅寺</a> |
        <a href="http://www.huilongsi.org/" target="_blank">上海会龙寺</a>
      </div>

      <div class="foot">
        <p class="f-nav">
          <a>关于我们</a> |
          <a>联系我们</a> |
          <a>隐私保护</a> |
          <a>免责声明</a>
        </p>
        <p> 上海佛教网 沪ICP备18032620号-1 <br> Copyright [@] 2018-2028 上海佛教协会 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: '1',
      form: {
        input: ''
      }
    };
  },
  methods: {
    submit() {
      if (this.form.input !== '') {
        this.$router.push({ path: `/pageListSearch/${this.form.input}` });
      }
    },
    gotoindex() {
      this.$router.push({ path: `/index` });
    },
    handleSelect(key, keyPath) {
      if (key === '1') {
        this.$router.push({ path: `/index` });
      }
      if (key === '2') {
        this.$router.push({ path: `/introduce` });
      }
      if (key === '3') {
        this.$router.push({ path: `/newsCenter` });
      }
      if (key === '4') {
        this.$router.push({ path: `/policies` });
      }
      if (key === '5') {
        this.$router.push({ path: `/charity` });
      }
      if (key === '6') {
        this.$router.push({ path: `/acquaintingPagoda` });
      }
    }
  },
  created() {
    this.$route.matched.forEach((item, index) => {
      // 先判断父级路由是否是空字符串或者meta是否为首页，直接复写路径到根路径
      item.name === '主页' ? (item.path = '/') : this.$route.path === item.path;
    });
  }
};
</script>

<style lang="less">
.qrcode {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 300px;
  right: 50px;
  z-index: 999;
  img {
    width: 100%;
    height: 100%;
  }
}
.slider-item {
  cursor: pointer;
}
.swiper-pagination-bullet {
  background: rgb(141, 141, 141) !important;
}
.swiper-pagination-bullet-active {
  background: #e8ac3a !important;
}
.swiper-slide {
  position: relative;
  .tip {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #fff;
    line-height: 40px;
    font-size: 14px;
  }
}
.header {
  height: 161px;
  padding-top: 24px;
  width: 1000px;
  margin: 0 auto;
  margin-top: -24px;
  background: url('http://img.shanghaifoxie.com/header.png');

  .logo {
    cursor: pointer;
  }
}
.top .search .txt,
.top .search .btn {
  height: 30px;
  line-height: 30px;
  border: none;
  float: left;
  background-color: transparent;
}
.top {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
  .fr {
    float: right;
  }
  .fl {
    float: left;
    a {
      margin-right: 30px;
    }
  }
  .search {
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 1;
    width: 240px;
    height: 30px;
    background: #f0f0f0;
    border-radius: 15px;
    padding: 0 20px;
    .txt {
      width: 200px;
      outline: none;
    }
    .btn {
      width: 30px;
      height: 30px;
      background: url(../images/Shape.png) center center no-repeat;
      cursor: pointer;
    }
  }
}
.nav {
  width: 100%;
  height: 50px;
  background-color: #e8ac3a;
  ul {
    display: block;
    width: 1000px;
    margin: 0 auto;
  }
  .el-menu {
    background-color: #e8ac3a !important;
    li {
      background-color: #e8ac3a !important;
      list-style: none;
      font-size: 18px;
      color: #fff;
      width: 120px;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .is-active {
      border: none;
      color: #fff !important;
      background: #dd9b1e !important;
    }
  }
}
.content-container {
  height: 100%;
  width: 1000px;
  padding-bottom: 20px;
  padding-top: 20px;
  margin: 0 auto;
  .el-tabs {
    .el-tabs__content {
      overflow: visible;
    }
    .el-tabs__header {
      height: 45px;
      line-height: 45px;
      margin: 0 55px 0 0 !important;
      border-bottom: solid 1px #d8d8d8;
    }
    .el-tabs__item {
      font-size: 14px;
      opacity: 0.5;
      font-weight: normal;
      padding: 0 8px;
      position: relative;
      &:hover {
        color: #dd9b1e;
      }
    }
    .el-tabs__nav-wrap::after {
      background: #fff;
    }
    .el-tabs__active-bar {
      background: #dd9b1e;
    }
    .is-active {
      font-size: 18px;
      opacity: 1;
      color: #333;
    }
  }
  .home-column {
    // height: 45px;
    // line-height: 45px;
    // border-bottom: solid 1px #d8d8d8;
    .fr {
      cursor: pointer;
      margin-top: 13px;
    }
  }
  .content {
    height: 450px !important;
  }
  a.more {
    color: #e8ac3a;
    cursor: pointer;
  }
  h3,
  dd,
  dl,
  dt,
  p,
  img,
  a,
  span {
    cursor: pointer;
  }
}
.footer {
  background-color: #efb64b;
  padding: 46px 0;
  text-align: center;
  .links {
    width: 900px;
    margin: 0 auto;
    color: #fff;
    padding: 22px 30px;
    text-align: center;
    border: solid 1px #dd9b1e;
    position: relative;
    line-height: 24px;
    h3 {
      height: 28px;
      line-height: 28px;
      background-color: #efb64b;
      position: absolute;
      top: -14px;
      left: 50%;
      margin-left: -90px;
      width: 180px;
      font-size: 18px;
      &::before,
      &::after {
        position: absolute;
        display: block;
        content: '';
        top: 9px;
        width: 10px;
        height: 10px;
        background-color: #dd9b1e;
      }
      &::before {
        right: 22px;
      }
      &::after {
        left: 22px;
      }
    }
  }
  .foot {
    line-height: 24px;
    .f-nav {
      padding: 30px 0 20px 0;
      a {
        color: #333;
      }
    }
  }
}
</style>